<template>
  <div  class="index">
    <zh-space style="padding-top: 10px">
      <zh-card title="">
        <zh-form ref="queryForm" :model="state.queryParam" >
          <zh-form-input v-model="state.queryParam.funcCode"
                         label="接口编码" placeholder="支持模糊查询" >
          </zh-form-input>
          <zh-form-input v-model="state.queryParam.funcTitle"
                         label="接口名称" placeholder="支持模糊查询" >
          </zh-form-input>
          <zh-form-input v-model="state.queryParam.appId"
                         label="所属应用Id" placeholder="请输入所属应用ID" >
          </zh-form-input>
          <zh-form-input v-model="state.queryParam.appName"
                         label="所属应用名称" placeholder="支持模糊查询" >
          </zh-form-input>
          <zh-form-query :span="24" :showAdvanced="false" :form-ref="queryForm"
                         :table-ref="apiCarTable">
            <zh-button buttonType="del" @click="delBatch">批量移除购物车</zh-button>
          </zh-form-query>
        </zh-form>
      </zh-card>
      <zh-table
          ref="apiCarTable"
          title=""
          :height="600"
          funcCode="APICAR0001"
          :columns="state.tableColumn"
          :radio-config="{ trigger: 'row' }"
          :disabled="false"
          highlight-current-row
      >
        <template #op="{ row }">
          <zh-button buttonType="query" @click="query(row)" >详情</zh-button>
          <zh-button buttonType="edit" @click="apply(row)" >申请</zh-button>
          <zh-button buttonType="del"  @click="del(row)" >移除</zh-button>
        </template>
      </zh-table>
    </zh-space>
    <el-dialog
        ref="dialog"
        v-model="state.dialogVisible"
        title="接口信息"
        width="80%"
    >
      <api-info ref="apiInfoPage" :display-flag="true"></api-info>
    </el-dialog>
    <zh-dialog
        ref="consumerDialog"
        v-model="state.consumerVisible"
        title="接口申请信息"
        width="30%"
        @confirm="saveConsumer"
    >
      <consumer-info ref="consumerInfoPage" :displayFlag="false"/>
    </zh-dialog>
  </div>
</template>
<script lang="ts" setup name="apiCar">
import ApiInfo from '@/views/apiCenter/ApiManager/component/ApiInfo.vue';
import ConsumerInfo from '@/views/apiCenter/ApiConsumer/component/ConsumerInfo.vue';
import {ElMessageBox} from "element-plus";

//-----------自定义子组件-------------
const queryForm = ref<any>({});
const apiCarTable = ref<any>({});
const apiInfoPage = ref();
const consumerInfoPage=ref();
//-----------定义参数-----------------

const state = reactive({
  queryParam:{
    funcCode:''
  },
  tableColumn:[
    { type: 'checkbox', width: 50, fixed: 'left' },
    {field: 'carId', title: '购物车接口id', fixed: 'left', visible: false, align: 'center', width: 10},
    {field: 'funcCode', title: '接口编码', fixed: 'left', visible: true, align: 'center', minWidth: 300},
    {field: 'funcTitle', title: '接口名称',  visible: true, align: 'center',minWidth: 300},
    {field: 'appId', title: '所属应用ID', visible: true, align: 'center', minWidth: 200},
    {field: 'appName', title: '所属应用名称', visible: true, align: 'center', minWidth: 300},
    {field: 'op', title: '操作', visible: true, align: 'center', minWidth: 300, fixed: 'right', slots: {default: 'op'}},
  ],
  //接口信息弹窗
  dialogVisible: false,
  //接口申请弹窗
  consumerVisible:false,
  selectedRow: {}

});

onMounted(()=>{
  apiCarTable.value.query();
})

function del(row){
  const params={
    "carId":''
  }
  params.carId=row.carId
  $api.common.send.post('APICAR0006', params).then((res) => {
    $messageBox.success('移除成功', '提示');
    apiCarTable.value.query();
  }).catch(() => {});
}

function query(row){
  state.dialogVisible=true;
  nextTick(()=>{
    apiInfoPage.value.initInfo(row.funcId,true);
  })
}

function delBatch(){
  const list= apiCarTable.value.getAllCheckboxRecords();
  if(list.length>0){
    ElMessageBox.confirm(
        '将要从购物车批量移除选择接口',
        '提示',
        {
          confirmButtonText: '确定',
          type: 'warning',
          showCancelButton: false
        }
    ).then(() => {
      let carIds:Array<string> =new Array<string>();
      for(let index in list){
        carIds.push(list[index].carId);
      }

      const params={
        "carIds":carIds
      }
      params.carIds=carIds
      $api.common.send.post('APICAR0007', params).then((res) => {
        $messageBox.success('移除成功', '提示');
        apiCarTable.value.query();
      }).catch(() => {});
    })

  }else{
    $messageBox.warning('目前没有勾选接口', '提示');
  }
}

function apply(row){
  state.consumerVisible=true;
  nextTick(()=>{
    let consumerInfo={
      funcId:row.funcId,
      funcCode:row.funcCode,
      funcTitle:row.funcTitle,
    }
    consumerInfoPage.value.setInitDate(consumerInfo);
  })
  state.selectedRow=row;
}

function saveConsumer(){
    consumerInfoPage.value.saveConsumerInfo();
    state.consumerVisible=false;
    const params={
      carId:''
    };
    params.carId=state.selectedRow.carId
    $api.common.send.post('APICAR0006', params).then((res) => {
      apiCarTable.value.query();
    }).catch(() => {});
}
</script>
<style lang="scss">

</style>
